<template>
  <div>
    <NewPageCoolModal v-model="visible" :title="id == 1 ? '资产告警' : '告警处置'">
      <div v-if="id == 1">
        <div class="model-top" style="padding-top: 0px">
          <div style="width: 50%">
            <div style="padding: 5px 10px">
              <div class="circle"></div>
              <div class="title">告警来源分类信息</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="id == 2">
        <div class="model-top">
          <div style="width: 55%">
            <div class="lb">
              <ul class="yj-title">
                <li>部门</li>
                <li style="flex: 1.5">系统名称</li>
                <li>危险等级</li>
                <li>处置状态</li>
              </ul>
              <!-- <SeamlessScroll :step="0.3" :direction="1" :data="modeldata.gjczlb" style="height: 370px"> -->
              <ul class="gund">
                <li v-for="(item, index) in xksjgk" :key="index" class="shishixinxi">
                  <span>{{ item[0] }}</span>
                  <span style="flex: 1.5">{{ item[1] }}</span>
                  <span :style="{ color: item[2] == '低危' ? '#2AB9FF' : item[2] == '中危' ? '#FF963B' : '#FF3B3B' }">{{ item[2] }}</span>
                  <span :style="{ color: item[3] == '已处置' ? '#8FFF91' : '' }">{{ item[3] }}</span>
                </li>
              </ul>
              <!-- </SeamlessScroll> -->
            </div>
          </div>
          <div style="width: 45%">
            <div style="padding: 5px 10px">
              <div class="circle"></div>
              <div class="title">处置状态分类信息</div>
            </div>
          </div>
        </div>
      </div>
    </NewPageCoolModal>
  </div>
</template>

<script>
import NewPageCoolModal from './NewPageCoolModal'
export default {
  model: {
    prop: 'visible',
    event: 'change'
  },
  props: {
    id: {
      type: Number,
      default: 1
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  components: {
    NewPageCoolModal
  },
  data() {
    return {
      num1: 0,
      num2: 0,
      modeldata: {},
      // visible: true,
      xksjgk: [
        ['心理学', '专业学位', '低危', '人文'],
        ['生物学', '专业学位', '中危', '生命科学'],
        ['基础医学', '专业学位', '高危', '医学'],
        ['工程', '专业学位', '低危', '专业学位'],
        ['生物学', '专业学位', '中危', '生命科学'],
        ['基础医学', '专业学位', '高危', '医学'],
        ['工程', '专业学位', '低危', '专业学位'],
        ['生物学', '专业学位', '中危', '生命科学'],
        ['基础医学', '专业学位', '高危', '医学'],
        ['工程', '专业学位', '低危', '专业学位'],
        ['111', '专业学位', '中危', '专业学位']
      ],
      arr1: [
        { series: '收入概况', type: '中1院', value: 42 },
        { series: '收入概况', type: '医学院', value: 36 },
        { series: '收入概况', type: '学院', value: 34 },
        { series: '收入概况', type: '中医学院', value: 104 },
        { series: '收入概况', type: '中院', value: 42 },
        { series: '收入概况', type: '院', value: 42 }
      ],
      arr2: [
        {
          series: '类型',
          type: '故障',
          value: 55
        },
        {
          series: '类型',
          type: '故障2',
          value: 35
        },
        {
          series: '类型',
          type: '终端故障',
          value: 30
        }
      ]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.circle {
  width: 12px;
  height: 12px;
  line-height: 12px;
  opacity: 1;
  border-radius: 100%;
  display: inline-block;
  border: 3px solid #36e4fd;
  vertical-align: middle;
  margin-right: 7px;
  margin-bottom: 1px;
}
.title {
  display: inline-block;
  font-size: 14px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  color: #19e4ff;
}
.model-top {
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
}
.model-bot {
  display: flex;
  justify-content: space-between;
}
.lb {
  width: 95%;
  margin: 0 auto;
  height: 380px;

  .yj-title {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    background: rgba(32, 173, 244, 0);
    width: 100%;

    li {
      font-weight: 400;
      color: #e8e8e8;
      text-align: center;
      flex: 1;
      background: rgba(19, 155, 255, 0.13);
      padding: 10px;
      font-family: 'SourceHanSansCN';
      overflow: hidden;
      font-size: 15px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .gund {
    padding: 0;
    margin: 0;
    text-align: left;
    width: 100%;
    list-style-type: none;

    .shishixinxi {
      width: 100%;
      font-size: 14px;
      font-family: 'SourceHanSansCN';
      font-weight: 400;
      color: #d8f0ff;
      background: rgba(19, 155, 255, 0.05);

      align-items: center;
      text-align: center;
      display: flex;
      margin-top: 6px;

      span {
        flex: 1;
        overflow: hidden;
        padding: 5px 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    li:hover {
      cursor: pointer;
      color: #fff;
    }
  }
}
</style>
